<template>
	<view>
		<nav-box title="结果查看"></nav-box>
		<view class="content">
			<view class="top-box">
				<image src="../../static/images/icon_1.png" mode=""></image>
				<text>您获得了90分，再接再厉！</text>
			</view>
			<view class="list-box">
				<text class="title">错题解析</text>
				<block v-for="item in list" :key="item.id">
					<view class="item-box">
						<text class="item-title">{{item.number}}、{{item.title}}</text>
						<text>正确答案为{{item.right}}</text>
						<text>解析：{{item.analysis}}</text>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					id: 1, 
					number: 15,
					title: '生理盐水是多少浓度的Nacl水溶液？',
					right: 'D',
					analysis: '生理盐水是百分之零点九的氯化钠水溶液'
				},{
					id: 2, 
					number: 20,
					title: '生理盐水是多少浓度的Nacl水溶液？',
					right: 'D',
					analysis: '生理盐水是百分之零点九的氯化钠水溶液'
				}]
			};
		}
	}
</script>

<style lang="scss" scoped>
.content {
	padding: 32upx;
	.top-box {
		margin-bottom: 40upx;
		padding: 64upx 0 68upx 0;
		text-align: center;
		background-color: #FFFFFF;
		border-radius: 32upx;
		color: #6c6c6c;
		font-size: 32upx;
		image {
			width: 80upx;
			height: 84upx;
			margin-bottom: 34upx;
		}
		text {
			display: block;
		}
	}
	.list-box {
		background-color: #FFFFFF;
		border-radius: 32upx;
		padding: 40upx 48upx;
		.title {
			font-size: 40upx;
			color: #4b4b4b;
		}
		.item-box {
			padding: 46upx 0;
			font-size: 28upx;
			color: #7E7E7E;
			border-bottom: 2upx solid #EFEFEF;
			text {
				display: block;
				&:not(:last-child) {
					margin-bottom: 16upx;
				}
			}
			.item-title {
				color: #4B4B4B;
			}
		}
	}
}
</style>
